<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="heard :: head"></head>

<body>
<nav th:replace="heard :: nav"></nav>
<div class="container" style="font-size: 14px;">
    <div class="row ">

        <div class="col-md-8 offset-md-2" id="tool1">
            <div class="card">
                <div class="card-body">
                    <div class="input-group  mb-3">
                        <input id="searchCode" type="text" class="form-control" placeholder="Search for your parameter code"
                               aria-label="Search for your parameter code" aria-describedby="button-addon2">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" id="button-addon2">查询</button>
                        </div>
                        <div class="input-group-append">
                            <a class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"
                               aria-haspopup="true" aria-expanded="false" id="button-opt">操作</a>
                            <div class="dropdown-menu" aria-labelledby="button-opt">
                                <button class="dropdown-item" id="button-add">新增</button>
                                <button class="dropdown-item" id="button-edit">编辑</button>
                                <button class="dropdown-item" id="button-remove">删除</button>
                            </div>
                        </div>
                    </div>

                    <!--                 <div class="btn-group btn-group-sm" role="group" id="toolbar"  aria-label="Basic example">
                                         <button type="button" class="btn btn-outline-secondary">*</button>
                                         <button type="button" class="btn btn-outline-secondary">-</button>
                                     </div>-->
                    <!-- <div  class="button-group ">
                         <button class="btn btn-outline-secondary" >编辑</button>
                         <button class="btn btn-outline-secondary" >删除</button>
 &lt;!&ndash;                        <a href="/home/p/' + id + '/edit"><i class="fas fa-edit"></i></a>&nbsp;<a href="#"><i
                             class="fas fa-trash"></i></a>&ndash;&gt;
                     </div>-->
                    <table id="table" class="table table-sm table-borderless "></table>
                </div>


            </div>

        </div>
    </div>

</div>

</body>
<script>
    $(function () {
        initTable();
        // 查询
        $("#button-addon2").click(function () {
            $('#table').bootstrapTable('refresh');
        });
        // 新建
        $("#button-add").click(function () {
            window.location.href = "/home/p/edit";
        });
        // 编辑
        $("#button-edit").click(function () {
            let data = $('#table').bootstrapTable('getSelections');
            if (data.length === 0) {
                alert("请选中操作对象");
                return;
            }
            let pid = data[0].id;
            window.location.href = '/home/p/' + pid + '/edit';
        });
        // 删除
        $("#button-remove").click(function () {
            let data = $('#table').bootstrapTable('getSelections');
            if (data.length === 0) {
                alert("请选中操作对象");
                return;
            }
            let pid = data[0].id;
            $.ajax({
                type: "delete",
                url: "/parameter/" + pid,
                async: true,
                contentType: 'application/json',
                dataType: 'JSON',
                success: function (obj) {
                    $('#table').bootstrapTable('refresh')
                }
            });
        });
        //$("#button-remove").attr('href', '/home/p/edit');
    })


    function initTable() {
        $('#table').bootstrapTable({
            url: "/parameter/page",
            method: 'GET',
            dataType: "json",//数据类型
            sidePagination: "server",
            pagination: true,
            showHeader: false,
            /* height:750,*/
            /*        toolbar: '#toolbar',*/
            clickToSelect: true,
            uniqueId: "id",
            pageNumber: 1,
            pageList: [5],
            cardView: false,
            columns: [{
                radio: true,

            }, {
                field: 'name',
                title: "name",
            },/* {
            field: 'name',
            title: "name",
        },*/
            ],
            queryParams: function (params) {
                let code = $('#searchCode').val();
                var temp = {
                    pageSize: params.limit,
                    pageNumber: (params.offset / params.limit) + 1,
                    code: code
                };
                return temp;
            },
            responseHandler: function (res) {
                return {
                    // "total": res.value,
                    "rows": res.data
                }
            },
            onLoadSuccess: function () {
                // alert("数据加载成功");
            },

            onLoadError: function () {
                //alert("数据加载失败");
            },
            onDblClickRow: function (row, $element) {
                window.location.href = '/home/p/' + row.id + '/view';
            },
        });


    }

    function formatterPCard(value, row, index) {
        let code = row.code;
        let id = row.id;
        let name = row.name;
        let description = row.description;
        return '        <div className="card">' +
            '            <div className="card-body">' +
            '                <h6 className="card-title">&nbsp;&nbsp;&nbsp;&nbsp;<a  href="/home/p/' + id + '/v"  class="text-body card-title">' + name + '</a></h6>' +
            /*        '                ' + code + '' +
                    '                ' + description + '' +*/
            /*
                    '                <a  href="/home/p/' + id + '/edit" ><i class="fas fa-edit" ></i></a>&nbsp;<a href="#"><i class="fas fa-trash"></i></a>' +
            */
            '            </div>' +
            '        </div>';
    }
</script>
</html>
